<!--
 * @Description: 用户管理
 * @Author: wangwangwang
 * @Date: 2020-06-29 11:18:28
 * @LastEditors  : yangxr
 * @LastEditTime : 2021-12-29 08:46:46
-->
<template>
  <div class="pages_content table dictionary-container">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display: flex">
        <div
          v-loading="treeLoading"
          class="main_left scroll"
          style="width: 230px; padding: 20px"
        >
          <div style="padding-right: 10px">
            <el-tree
              ref="Tree"
              :data="treearr"
              :props="defaultProps"
              class="tree-line"
              :indent="0"
              node-key="id"
              :default-expanded-keys="defaultExpandedKeys"
              :expand-on-click-node="false"
              @node-click="handleClick"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <div
                  v-if="data.imgIcon"
                  style="
                    display: inline-block;
                    width: 17px;
                    height: 26px;
                    padding: 8px 3px 0 0;
                  "
                >
                  <img style="width: 14px; height: 14px" :src="data.imgIcon" />
                </div>
                <span style="padding-right: 10px">{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="main_right">
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav" class="search">
              <div style="height: 18px; width: 100%"></div>
              <div>
                <el-form ref="form" :inline="true" :model="form">
                  <el-form-item label="名称" prop="name">
                    <el-input
                      v-model="form.name"
                      placeholder="请输入"
                      @keyup.enter.native="initData()"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="组织" prop="organizationShowInfo">
                    <el-input
                      v-model="form.organizationShowInfo"
                      placeholder="请输入"
                      @keyup.enter.native="initData()"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="岗位" prop="stationName">
                    <el-input
                      v-model="form.stationName"
                      placeholder="请输入"
                      @keyup.enter.native="initData()"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="手机号" prop="phoneNum">
                    <el-input
                      v-model="form.phoneNum"
                      placeholder="请输入"
                      @keyup.enter.native="initData()"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      icon="el-icon-search"
                      size="medium"
                      class="bottom_all"
                      @click="(page = 1), initData()"
                      >查 询</el-button
                    >
                    <el-button
                      size="medium"
                      class="bottom_all_two"
                      @click="resetData()"
                      >重 置</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <div class="card">
            <div class="card_nav">
              <div>
                <el-button
                  v-if="
                    ButtonList.findIndex(
                      (res) => res.buttonValue == 'TIANJIA'
                    ) !== -1
                  "
                  size="small"
                  class="bottom_all"
                  style="margin-left: 0"
                  @click="add()"
                >
                  <i
                    class="icon iconfont iconicon_button_add"
                    style="font-size: 12px"
                  ></i>
                  添加
                </el-button>
                <el-button
                  v-if="
                    ButtonList.findIndex(
                      (res) => res.buttonValue == 'RIYONG'
                    ) !== -1
                  "
                  size="small"
                  class="bottom_three"
                  @click="updateType(1)"
                >
                  <i
                    class="icon iconfont iconicon_button_startuse"
                    style="font-size: 12px"
                  ></i>
                  启用
                </el-button>
                <el-button
                  v-if="
                    ButtonList.findIndex(
                      (res) => res.buttonValue == 'JINYONG'
                    ) !== -1
                  "
                  size="small"
                  class="bottom_four"
                  @click="updateType(2)"
                >
                  <i
                    class="icon iconfont iconicon_button_disable1"
                    style="font-size: 12px"
                  ></i>
                  禁用
                </el-button>
                <el-button
                  v-if="
                    ButtonList.findIndex(
                      (res) => res.buttonValue == 'SHANCHU'
                    ) !== -1
                  "
                  size="small"
                  class="bottom_two"
                  @click="updateType(3)"
                >
                  <i
                    class="icon iconfont iconicon_button_delete"
                    style="font-size: 12px"
                  ></i>
                  删除
                </el-button>
                <el-button
                  v-if="
                    ButtonList.findIndex(
                      (res) => res.buttonValue == 'DAORU'
                    ) !== -1
                  "
                  size="small"
                  class="botton_five"
                  @click="importUser"
                  >导入用户</el-button
                >
                <el-button
                  size="small"
                  class="botton_five"
                  @click="resetPassword"
                  >重置密码</el-button
                >
              </div>
              <div>
                <el-link
                  v-if="
                    ButtonList.findIndex(
                      (res) => res.buttonValue == 'BAOCUNPXH'
                    ) !== -1
                  "
                  :underline="false"
                  @click="updateSortNum()"
                >
                  <span class="el-icon--left">
                    <i class="iconfont iconicon_button_sort1"></i>
                  </span>
                  保存排序号
                </el-link>
                <el-dropdown
                  :hide-on-click="false"
                  trigger="click"
                  style="margin: 0 20px"
                >
                  <el-link :underline="false">
                    <span class="el-icon--left">
                      <i class="iconfont iconicon_button_filtrate"></i>
                    </span>
                    筛选
                  </el-link>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(item, index) in tableColumns"
                      :key="index"
                    >
                      <el-checkbox v-model="item.status">{{
                        item.label
                      }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-link
                  v-if="
                    ButtonList.findIndex(
                      (res) => res.buttonValue == 'DAOCHU'
                    ) !== -1
                  "
                  :underline="false"
                  @click="$Download(DownloadURL, form)"
                >
                  <span class="el-icon--left">
                    <i class="iconfont iconicon_button_export1"></i>
                  </span>
                  导出
                </el-link>
              </div>
            </div>
            <div class="card_info" :style="style">
              <el-table
                :header-cell-style="{ background: '#f3f6f9' }"
                :cell-style="{ borderRight: 'none' }"
                border
                stripe
                style="width: 100%"
                :data="tableData"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  align="center"
                  type="selection"
                ></el-table-column>
                <template v-for="(item, index) in tableColumns">
                  <el-table-column
                    v-if="item.status"
                    :key="index"
                    :label="item.label"
                    align="center"
                    :width="item.width"
                    :fixed="item.label == '操作' ? 'right' : false"
                  >
                    <template slot-scope="scope">
                      <span v-if="item.label == '性别'">{{
                        scope.row.sex == 0
                          ? "未知"
                          : scope.row.sex == 1
                          ? "男"
                          : "女"
                      }}</span>
                      <span v-if="item.label == '登录方式'">{{
                        scope.row.loginType == 1
                          ? "用户名"
                          : scope.row.loginType == 2
                          ? "手机号"
                          : "手机号/用户名"
                      }}</span>
                      <span v-if="item.label == '是否支持创建子账号'">{{
                        scope.row.createChindAccount == 0 ? "不支持" : "支持"
                      }}</span>
                      <span
                        v-if="scope.row.enable == 0 && item.label == '状态'"
                        style="color: #969799"
                        >禁用</span
                      >
                      <span
                        v-if="scope.row.enable == 1 && item.label == '状态'"
                        style="color: #00a754"
                        >启用</span
                      >
                      <el-button
                        v-if="
                          item.label == '操作' &&
                          ButtonList.findIndex(
                            (res) => res.buttonValue == 'XIUGAI'
                          ) !== -1
                        "
                        class="bottom_one"
                        size="mini"
                        @click="update(scope.row)"
                      >
                        修改
                      </el-button>
                      <div v-if="item.label == '排序号'">
                        <el-input v-model="scope.row.sortNum"></el-input>
                      </div>
                      <span
                        v-if="
                          item.label !== '操作' &&
                          item.label !== '排序号' &&
                          item.label !== '状态' &&
                          item.label !== '性别' &&
                          item.label !== '登录方式' &&
                          item.label !== '是否支持创建子账号'
                        "
                        >{{ scope.row[item.prop] }}</span
                      >
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </div>
        </div>
      </el-main>
      <div class="card_bottom">
        <div class="card_bottom_left">
          <div class="top_page_totle">总共{{ total }}条</div>
          <el-pagination
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 100, 200, 500, 1000]"
            layout="prev,pager,sizes,next,jumper"
            :total="total"
            :current-page.sync="page"
            @size-change="sizeChange"
            @current-change="initData()"
          ></el-pagination>
        </div>
        <div>
          <el-button
            size="mini"
            icon="el-icon-refresh-right"
            class="bottom_all_two"
            @click="initData()"
            >刷新</el-button
          >
        </div>
      </div>
    </el-container>
    <!-- 添加 -->
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
    >
      <span slot="title" class="dialog-title">{{ dialogtitle }}</span>
      <el-form
        ref="dialogForm"
        :model="dialogForm"
        :rules="rules"
        :inline="true"
        label-width="150px"
      >
        <el-form-item prop="name">
          <template slot="label">
            <span style="color: #ff0000">姓名</span>
          </template>
          <el-input v-model="dialogForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNum">
          <template slot="label">
            <span style="color: #ff0000">手机号</span>
          </template>
          <el-input
            v-model="dialogForm.phoneNum"
            type="Number"
            placeholder="请输入"
            oninput="if(value.length > 11)value = value.slice(0, 11)"
          ></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="loginAccount">
          <template slot="label">
            <span style="color: #ff0000">登录账号</span>
          </template>
          <el-input
            v-model.trim="dialogForm.loginAccount"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item prop="organizationId">
          <template slot="label">
            <span style="color: #ff0000">所属组织</span>
          </template>
          <span style="cursor: pointer" @click.stop="showVisible">{{
            dialogForm.organizationIdarr
          }}</span>
        </el-form-item>
        <el-form-item prop="userTypeId">
          <template slot="label">
            <span style="color: #ff0000">用户类型</span>
          </template>
          <el-select v-model="dialogForm.userTypeId" placeholder="请选择">
            <el-option
              v-for="(item, index) in usertypesoptions"
              :key="index"
              :label="item.itemName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位">
          <el-select
            v-model="dialogForm.stationId"
            filterable
            placeholder="请选择"
            @change="
              getrankoptions(dialogForm.stationId), (dialogForm.rankId = '')
            "
          >
            <el-option
              v-for="(item, index) in stationoptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职务">
          <el-select v-model="dialogForm.postId" placeholder="请选择">
            <el-option
              v-for="(item, index) in positionoptions"
              :key="index"
              :label="item.itemName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="dialogForm.sex" placeholder="请选择">
            <el-option label="未知" :value="0"></el-option>
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input
            v-model="dialogForm.idCard"
            type="text"
            maxlength="18"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="职级">
          <el-select v-model="dialogForm.rankId" placeholder="请选择">
            <el-option
              v-for="(item, index) in rankoptions"
              :key="index"
              :label="item.targetName"
              :value="item.targetId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登录方式" prop="loginType">
          <el-select
            v-model="dialogForm.loginType"
            multiple
            placeholder="请选择"
          >
            <el-option label="用户名" :value="1"></el-option>
            <el-option label="手机号" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="NC编号">
          <el-input
            v-model="dialogForm.ncNo"
            placeholder="请输入"
            @input="changecode('ncNo')"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input
            v-model="dialogForm.sortNum"
            type="number"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否支持创建子账号" prop="createChindAccount">
          <el-select v-model="dialogForm.createChindAccount">
            <el-option label="支持" :value="1"></el-option>
            <el-option label="不支持" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-form-item label="家庭住址">
            <el-input
              v-model="dialogForm.address"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="状态">
          <el-radio-group v-model="dialogForm.enable">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="resefrom">取 消</el-button>
        <el-button class="bottom_all" @click="sureSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 导入 -->
    <el-dialog
      v-dialogDrag
      :visible.sync="exportDialog"
      width="680px"
      :close-on-click-modal="false"
    >
      <span slot="title" class="dialog-title">导入用户数据</span>
      <div
        v-loading="loading"
        element-loading-text="数据解析中..."
        element-loading-background="rgba(0, 0, 0, 0.8)"
        class="dialoginfo"
        style="text-align: center"
      >
        <el-upload
          class="upload-demo"
          :on-success="fileSuccess"
          :before-upload="filebefore"
          :show-file-list="false"
          drag
          action="/base/system/user/importUserList"
          name="file"
          :headers="upheader"
        >
          <i slot="trigger" class="el-icon-upload"></i>
          <div slot="trigger" class="el-upload__text">
            将文件拖到此处，或
            <em>点击选取文件</em>
          </div>
        </el-upload>
        <div style="padding-top: 10px">
          <el-button
            class="bottom_all"
            style="margin-left: 0px"
            @click="importSubmit()"
            >下载模板</el-button
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="exportDialog = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <Organization
      ref="organization"
      :default="dialogForm.organizationId"
      :visible="organVisible"
      :dataSource="orangeoptions"
      title="选择组织"
      :showArr="allOrganizationArr"
      @handleSure="handleSure"
      @handleClose="organVisible = false"
    />
  </div>
</template>
<script>
import Organization from "@/components/organization";
import { getDicType } from "@/api/common";
import {
  queryPage,
  saveOrUpdate,
  updateOrDelete,
  queryjobPage,
  updateSortNum,
  reset_password,
  Download,
  exportTemplate,
  get_list,
} from "@/api/basedata/user";
import { queryPage2 as organgequeryPage } from "@/api/basedata/organization.js";
import breaDcrumb from "@/components/breadcrumb";
import { mapGetters } from "vuex";
import { transData, formatOrganization } from "@/utils/utils";
import { codeReg, sortReg } from "@/common/RegExp.js";
import { getUserInfo, getToken, getUserId } from "@/utils/auth";
export default {
  components: {
    breaDcrumb,
    Organization,
  },
  data() {
    var landlinePhone = (rule, value, callback) => {
      if (!this.$regExp.landlinePhoneReg(value)) {
        return callback(new Error("电话格式错误！"));
      } else {
        callback();
      }
    };
    // var validatePass = (rule, value, callback) => {
    //   if (cardReg(value) || value == '') {
    //     callback()
    //   } else {
    //     callback(new Error('请输入正确的身份证号码!'))
    //   }
    // }
    var validatePass1 = (rule, value, callback) => {
      if (sortReg(value)) {
        callback();
      } else {
        callback(new Error("请输正整数序号!"));
      }
    };
    return {
      userInfo: "",
      upheader: {},
      loading: false,
      organVisible: false,
      treeLoading: false,
      dataSource: [],
      DownloadURL: Download,
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        organizationId: [
          { required: true, message: "请选择组织", trigger: "change" },
        ],
        stationId: [
          { required: true, message: "请选择岗位", trigger: "change" },
        ],
        postId: [{ required: true, message: "请选择职级", trigger: "change" }],
        rankId: [{ required: true, message: "请选择职务", trigger: "change" }],
        phoneNum: [{ validator: landlinePhone, trigger: "change" }],
        // idCard: [
        //   {
        //     validator: validatePass,
        //     trigger: 'blur'
        //   }
        // ],
        ncNo: [{ required: true, message: "请输入NC编号", trigger: "blur" }],
        loginAccount: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
        ],
        loginType: [
          { required: true, message: "请选择登录方式", trigger: "change" },
        ],
        userTypeId: [
          { required: true, message: "请选择用户类型", trigger: "change" },
        ],
        sortNum: [
          { required: true, message: "请输入排序号", trigger: "blur" },
          {
            validator: validatePass1,
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请输入用家庭住址", trigger: "blur" },
        ],
      },
      stationoptions: [],
      orangeoptions: [],
      /* 添加修改弹窗*/
      dialogVisible: false,
      dialogtitle: "添加用户",
      /* 判断收起展开*/
      showCardNav: true,
      /* 列表展示*/
      tableColumns: [
        { label: "名称", width: "120", prop: "name", status: true },
        {
          label: "组织",
          width: "300",
          prop: "organizationShowInfo",
          status: true,
        },
        { label: "职务", width: "auto", prop: "postName", status: true },
        { label: "岗位", width: "160", prop: "stationName", status: true },
        { label: "职级", width: "140", prop: "rankName", status: true },
        { label: "性别", width: "auto", prop: "sex", status: true },
        { label: "手机号", width: "120", prop: "phoneNum", status: true },
        { label: "身份证", width: "240", prop: "idCard", status: true },
        { label: "家庭住址", width: "240", prop: "address", status: true },
        {
          label: "登录账号",
          width: "160",
          prop: "loginAccount",
          status: true,
        },
        { label: "登录方式", width: "140", prop: "loginType", status: true },
        {
          label: "是否支持创建子账号",
          width: "180",
          prop: "createChindAccount",
          status: true,
        },
        {
          label: "用户类型",
          width: "160",
          prop: "userTypeName",
          status: true,
        },
        { label: "排序号", width: "120", prop: "sortNum", status: true },
        { label: "状态", width: "auto", prop: "enable", status: true },
        { label: "操作", width: 120, prop: "options", status: true },
      ],
      /* 列表选中的数据集*/
      SelectionTableData: [],
      tableData: [],
      total: 0,
      dialogTable: [],
      page: 1,
      pageSize: 10,
      dialogForm: {
        userEentrance: "entrance_manager",
        organizationIdarr: "请选择组织",
        companyId: "",
        name: "",
        organizationId: "",
        stationId: "",
        postId: "",
        rankId: "",
        sex: 0,
        phoneNum: "",
        idCard: "",
        ncNo: "",
        loginAccount: "",
        loginType: [],
        createChindAccount: 0,
        userTypeId: "",
        sortNum: "",
        enable: 1,
        address: "",
      },
      form: {
        name: "",
        userEentrance: "entrance_manager",
        organizationShowInfo: "",
        stationName: "",
        organizationId: "",
        phoneNum: "",
      },
      /* 职务*/
      positionoptions: [],
      /* 职级*/
      rankoptions: [],
      /* 用户类型*/
      usertypesoptions: [],
      allOrgangeData: [],
      ButtonList: [],
      exportDialog: false,
      allOrganizationArr: [], //选中的回显数据
      defaultProps: {
        children: "children",
        label: "name",
      },
      defaultExpandedKeys: ["parent_id"],
      treearr: [],
    };
  },
  computed: {
    ...mapGetters({
      screenWidth: "getscreenWidth",
      screenHeight: "getscreenHeight",
      Collapse: "getsCollapse",
    }),
    style() {
      let num = 0;
      if (this.Collapse) {
        num = this.screenWidth - 325;
      } else {
        num = this.screenWidth - 421;
      }
      return "width:" + num + "px;";
    },
  },
  created() {
    this.userInfo = getUserInfo();
    this.ButtonList = this.$ButtonList();
    getDicType({ code: "position" }).then((res) => {
      this.positionoptions = res.data.items;
    });
    getDicType({ code: "usertypes" }).then((res) => {
      this.usertypesoptions = res.data.items;
    });
    this.upheader = {
      "access-token": getToken(),
      "user-id": getUserId(),
    };
    queryjobPage({ page: 1, pageSize: 10000, enable: 1 }).then((res) => {
      this.stationoptions = res.data.data;
    });
    this.orangeoptions = [];
    const params = {
      page: 1,
      pageSize: 10000000,
    };
    this.treeLoading = true;
    organgequeryPage({ ...params, showEnable: 0 }).then((res) => {
      if (res.code === 1001) {
        res.data.data.forEach((a) => {
          a.label = a.name;
          a.value = a.id;
        });
        const { data } = res.data;
        this.allOrgangeData = data;
        this.orangeoptions = transData(
          data,
          "id",
          "parentId",
          "children",
          "parent_id"
        );
        this.treearr = [
          {
            children: this.orangeoptions,
            name: "组织树",
            id: "parent_id",
          },
        ];
        this.treeLoading = false;
      }
    });
  },
  mounted() {
    this.initData();
  },
  methods: {
    handleClick(e) {
      if (e.id === "parent_id") {
        this.form.organizationId = "";
        this.resetData();
        return;
      }
      this.form.organizationId = e.id;
      const params = {
        ...this.form,
        page: this.page,
        pageSize: this.pageSize,
        organizationId: e.id,
      };
      queryPage(params).then((res) => {
        this.total = res.data.totalRows;
        this.tableData = res.data.data;
      });
    },
    handleSure(data) {
      this.organVisible = false;
      const allOrganization = formatOrganization(
        this.allOrgangeData,
        data[0].id
      );
      this.dialogForm.organizationId =
        allOrganization[allOrganization.length - 1].id;
      this.dialogForm.organizationIdarr = allOrganization
        .map((item) => item.name)
        .join("-");
      const copyData = JSON.parse(JSON.stringify(allOrganization));
      copyData.reverse();
      const company = copyData.find(
        (item) =>
          item.typeId === "19da56b9e85648059e3cf1e7da497da4" ||
          item.typeId === "b8f9367217ab43f8924cd6c08a9ba300"
      );
      if (company) {
        this.dialogForm.companyId = company.id;
        this.dialogForm.company = company.name;
      }
    },
    showVisible() {
      this.organVisible = true;
      if (this.allOrganizationArr.length > 0) {
        //选中的回显自定义颜色
        this.allOrganizationArr = this.allOrganizationArr.map((res) => res.id);
        console.log(this.allOrganizationArr);
      }
    },
    /**根据岗位获取职级*/
    async getrankoptions(id) {
      let { data } = await get_list({
        sourceId: id,
        type: "stations_rank",
      });
      this.rankoptions = data.list;
    },
    fileSuccess(res) {
      this.loading = false;
      if (res.code == 1001) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: `本次导入数据成功${res.data.successNum}条，失败<span style="color:red">${res.data.failureNum}</span>条！！！`,
          type: "success",
        });
        if (res.data.failureNum !== 0) {
          let text = res.data.errResult
            .map((res) => `第${res.sortNum}行` + res.reason)
            .join(";");
          this.$notify.error({
            title: "导入失败用户",
            message: text,
            duration: 0,
          });
        }
        if (res.data.successNum !== 0) {
          this.initData();
        }
      } else {
        this.$message.error(res.codeMsg);
      }
    },
    filebefore(file) {
      this.loading = true;
      const isJPG = file.type === "application/vnd.ms-excel";
      if (!isJPG) {
        this.$message.error("数据上传必须是 xls 格式!");
        this.loading = false;
      }
      return isJPG;
    },
    /**导入用户*/
    importUser() {
      this.exportDialog = true;
    },
    /**下载模板*/
    importSubmit() {
      this.$Download(exportTemplate);
    },
    changecode(key) {
      this.dialogForm[key] = codeReg(this.dialogForm[key]);
    },
    resefrom() {
      this.dialogVisible = false;
    },
    resetPassword() {
      if (this.SelectionTableData.length == 0) {
        this.$message({
          message: "请先选择用户！！！",
          type: "warning",
        });
        return;
      }
      reset_password(this.SelectionTableData).then((res) => {
        if (res.code == 1001) {
          this.$message({
            message: "密码重置成功",
            type: "success",
          });
        }
      });
    },
    /* 更新排序号*/
    updateSortNum() {
      const sorts = [];
      this.tableData.forEach((v) => {
        sorts.push({ id: v.id, sortNum: v.sortNum });
      });
      updateSortNum(sorts).then((res) => {
        if (res.code === 1001) {
          this.$message.success("更新成功");
          this.initData();
        }
      });
    },
    initData() {
      const params = {
        ...this.form,
        page: this.page,
        pageSize: this.pageSize,
      };
      queryPage(params).then((res) => {
        this.total = res.data.totalRows;
        this.tableData = res.data.data;
      });
    },
    sizeChange(value) {
      this.pageSize = value;
      this.initData();
    },
    resetData() {
      this.$refs.form.resetFields();
      this.initData();
    },
    add() {
      this.allOrganizationArr = [];
      this.dialogVisible = true;
      this.$data.dialogForm = this.$options.data().dialogForm;
      setTimeout(() => {
        this.$refs.dialogForm.clearValidate();
        setTimeout(() => {
          this.dialogForm.loginType = [1, 2];
          console.log(this.dialogForm.loginType);
        }, 10);
      }, 10);
      this.dialogtitle = "添加用户";
    },
    updateType(index) {
      const self = this;
      this.$confirm(
        `确定${
          index === 1 ? "启用" : index === 2 ? "禁用" : "删除"
        }选中的数据?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
          type: "warning",
        }
      )
        .then(() => {
          switch (index) {
            case 1: {
              const params = {
                status: 1,
                type: "update_enable",
              };
              self.handleData(params);
              return;
            }
            case 2: {
              const params = {
                status: 0,
                type: "update_enable",
              };
              self.handleData(params);
              return;
            }
            case 3: {
              const params = {
                status: 0,
                type: "update_status",
              };
              self.handleData(params);
              return;
            }
            default:
              break;
          }
        })
        .catch(() => {});
    },
    handleData(data) {
      const params = {
        ...data,
        ids: this.SelectionTableData,
      };
      updateOrDelete(params).then(() => {
        this.initData();
        this.$message({
          message: "操作成功！",
          type: "success",
        });
      });
    },
    update(low) {
      /**
       * @Description: 修改用户
       * @Param:
       * @Author: wangwangwang
       */
      let data = JSON.parse(JSON.stringify(low));
      this.dialogVisible = true;
      this.dialogtitle = "修改用户";
      this.dialogForm = JSON.parse(JSON.stringify(data));
      this.dialogForm.sex = Number(data.sex);
      if (this.dialogForm.idCard === "-") {
        this.dialogForm.idCard = "";
      }
      this.dialogForm.loginType =
        data.loginType === 3 ? [1, 2] : [data.loginType];
      this.dialogForm.createChindAccount = Number(data.createChindAccount);
      let allOrganization = formatOrganization(
        this.allOrgangeData,
        data.organizationId
      );
      this.allOrganizationArr = allOrganization;
      if (allOrganization.length > 0) {
        this.dialogForm.organizationIdarr = allOrganization
          .map((item) => item.name)
          .join("-");
      } else {
        this.dialogForm.organizationIdarr = "请选择组织";
      }
      if (low.stationId) {
        this.getrankoptions(low.stationId);
      }
      setTimeout(() => {
        this.$refs.dialogForm.clearValidate();
      }, 10);
    },
    handleSelectionChange(val) {
      const data = [];
      for (const i in val) {
        data.push(val[i].id);
      }
      this.SelectionTableData = data;
    },
    sureSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          const params = {
            ...this.dialogForm,
            loginType:
              this.dialogForm.loginType.length === 2
                ? 3
                : this.dialogForm.loginType[0],
          };
          if (params.idCard === "") {
            params.idCard = "-";
          }
          saveOrUpdate(params).then((res) => {
            if (res.code === 1001) {
              this.$message({
                message: "操作成功！",
                type: "success",
              });
              this.dialogVisible = false;
              this.resefrom();
              this.initData();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCheckChange(e) {
      this.mineStatusValue = e.label;
      this.mineStatus = e.label;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-tree {
  display: inline-block;
}
.dictionary-container {
  .el-dialog {
    .el-input,
    .el-cascader,
    .el-select {
      width: 220px;
    }
  }
  .el-link {
    i {
      font-size: 14px;
      color: $bg_color;
    }
  }
  .el-link:hover {
    color: $bg_color;
  }
  .header_right {
    @include discen_al;
    padding: 0 20px;
    justify-content: space-between;
    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
    }
  }
  font-size: $font_size;
  .el-main {
    padding: 0;
  }
  .el-main::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  .el-main::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }
  .el-main::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }
  .el-main::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  .el-main::-webkit-scrollbar-corner {
    background: #179a16;
  }
  .search {
    padding: 0 20px;
    // display: flex;
    // align-items: center;
  }
  // .card {
  // }
  .card_nav {
    padding: 0 20px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card_info {
    padding: 0 20px;
  }
  .card_bottom {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    .card_bottom_left {
      display: flex;
      align-items: center;
      font-size: $font_size;
    }
  }
}
</style>
